<div style="margin-bottom:10px;">
  <h4><?php echo r('%sitename%', $sitename, __('Quickly visit the city in the tabulate below, experience the convenience that %sitename% brings to your lives.', true)); ?></h4>
</div>
<div class="bl">
  <div>
    <div class="dl"><?php echo r('%sitename%', $sitename, __('Click a local area to begin using %sitename%:',true)); ?></div>
    <div id="map_canvas" class="dl" style="margin:15px 5px 0 20px; width:75%; height:360px;"></div>
    <div class="dl" style="width:20%; height:360px; margin:15px 0 0 5px;">
        <div id="selectState" style="margin-top:3px;">
          <b><?php __('Select a State'); ?></b><br />
          <select id="state" style="width:190px;" onchange="changeState()">
            <option value="0"><?php __('Select a state'); ?></option>
<?php
  foreach ($cities as $city) {
      if (!$city['Location']['parent_id']) { ?>
            <option value="<?php e($city['Location']['id']); ?>"><?php e($city['Location']['name']); ?></option>
<?php
      }
  }
?>
          </select>
        </div>
        <div id="selectCity" style="margin-top:10px; display:none;">
          <b><?php __('Select a City'); ?></b><br />
          <select id="city" size="17" style="width:190px;" onchange="changeCity()"></select>
        </div>
    </div>
    <div style="clear:both;"></div>
<?php
  $tmp = '';
  $map = $state = $area = $array = array();
  foreach ($cities as $city) {
      if (!$city['Location']['parent_id']) { // is state
          $map[] = array(
              'id'   => $city['Location']['id'],
              'name' => $city['Location']['name'],
              'l1'   => $city['Location']['latitude'],
              'l2'   => $city['Location']['longitude']
          );
          $state[] = 'i'.$city['Location']['id'].':{ name:"'.$city['Location']['name'].'", ' .
                     'l1:"'.$city['Location']['latitude'].'", l2:"'.$city['Location']['longitude'].'" }';
      } else {
          $p     = $city['Location']['parent_id'];
          $id    = $city['Location']['id'];
          $count = isset($adsCount[$id]) ? number_format($adsCount[$id]) : '?';
          $array[$p][] = '{ id:'.$id.', name:"'.$city['Location']['name'].'", count:"'.$count.'", ' .
                          ' l1:"'.$city['Location']['latitude'].'", l2:"'.$city['Location']['longitude'].'" }';
      }

      $class = ($city['Location']['parent_id']) ? array('class'=>'city'):array('class'=>'state');
      $first = substr($city['Location']['name'], 0, 1);

      if ($tmp != $first) {
          $tmp = $first; ?>
  </div>
  <div class="dl" style="border:1px solid #f0f0f0; margin:20px; background-color:#EEEEEE">
    <div style="background-color:#EFFDD4; color:#666; text-align:center; border-bottom:1px solid #E5E5E5"><?php e(up($first)); ?></div>
    <div style="padding:0 5px;"><?php echo $html->link(__($city['Location']['name'],true), '/locations/city/'.$city['Location']['id'], $class); ?></div>
<?php
     } else { ?>
    <div style="padding:0 5px;"><?php echo $html->link(__($city['Location']['name'],true), '/locations/city/'.$city['Location']['id'], $class); ?></div>
<?php
     }
  }

  foreach ($array as $id=>$subArray) {
      $area[] = 'i'.$id.':['.implode(',', $subArray).']';
  }
?>
  </div>
  <div class="clear" style="display:none;">
    <img src="<?php e($this->base); ?>/img/location_icon_city.png" />
    <img src="<?php e($this->base); ?>/img/location_icon_town.png" />
  </div>
</div>

<script type="text/javascript">
var googleMap = new GMap2(document.getElementById('map_canvas'));
var cityIcon  = new GIcon(G_DEFAULT_ICON);
var areaIcon  = new GIcon(G_DEFAULT_ICON);

googleMap.enableContinuousZoom();
cityIcon.image    = '<?php e($this->base); ?>/img/location_icon_city.png';
cityIcon.shadow   = '';
cityIcon.iconSize = new GSize(32, 45);
areaIcon.image    = '<?php e($this->base); ?>/img/location_icon_town.png';
areaIcon.shadow   = '';
areaIcon.iconSize = new GSize(38, 38);

var defZoom = <?php e($zoom); ?>;
var current = <?php e($zoom); ?>;
var states  = {
    <?php echo implode(', ', $state)."\n"; ?>
};
var cities = {
    <?php echo implode(', ', $area)."\n"; ?>
};
var pin = {};
function initialize () {
    if (GBrowserIsCompatible()) {
        googleMap.setCenter(new GLatLng(<?php e($countryL1); ?>, <?php e($countryL2); ?>), <?php e($zoom); ?>);

<?php foreach($map as $data) { ?>
        var point = new GLatLng(<?php e($data['l1']); ?>, <?php e($data['l2']); ?>);
        var marker<?php e($data['id']); ?> = new GMarker(point, { icon:cityIcon });
        GEvent.addListener(marker<?php e($data['id']); ?>, 'click', function(){
            selectedState(<?php e($data['id']); ?>);
            changeState();
        });
        googleMap.addOverlay(marker<?php e($data['id']); ?>);

<?php } ?>
    }
} // initialize

function mainView () {
    var point = new GLatLng(<?php e($countryL1); ?>, <?php e($countryL2); ?>);

    if (current == defZoom) {
        googleMap.panTo(point);
    } else {
        /*setTimeout(function(){
            current -= 1;
            googleMap.zoomOut();
            mainView();
        }, 100);*/
        current = defZoom;
        googleMap.setZoom(defZoom);
        setTimeout(function(){ googleMap.panTo(point) }, 500);
    }
} // mainView

function cityView (l1, l2) {
    var point = new GLatLng(l1, l2);

    if (current == defZoom) {
        setTimeout(function(){ googleMap.panTo(point); }, 800);
        setTimeout(function(){ zoomin(); }, 2000);
    } else {
        current = defZoom;
        googleMap.setZoom(defZoom);
        setTimeout(function(){ googleMap.panTo(point); }, 1500);
        setTimeout(function(){ zoomin(); }, 2000);
    }
} // cityView

function zoomin () {
    /*if (current < 7) {
        setTimeout(function(){
            current += 1;
            googleMap.zoomIn();
            zoomin();
        }, 100);
    }*/
    current = 7;
    googleMap.setZoom(7);
} // zoomin

function changeState () {
    var id = $F('state');

    if (!id) {
        return;
    } else if (id == 0) { // back to country view
        mainView();
        removeCities();
        new Effect.BlindUp('selectCity', { duration:0.5 });
        return;
    }

    mainView();
    removeCities();
    loadCities(id);

    if ($('selectCity').visible() == false) {
        new Effect.BlindDown('selectCity', { duration:0.5 });
    } else {
        new Effect.Highlight('selectCity');
    }

    eval('var l1 = states.i'+id+'.l1;');
    eval('var l2 = states.i'+id+'.l2;');
    eval('var a  = states.i'+id+'.a;');

    cityView(l1, l2);
} // changeState

function loadCities (id) {
    var selection = '';
    eval('var list = cities.i'+id+';');

    if (typeof(list) != 'object') { // no city found
        $('city').update('');
        return;
    }

    list.each(function(e){
        selection += '<option value="'+e.id+'">'+e.name+'</option>';

        pin[e.id] = new GMarker(new GLatLng(e.l1, e.l2), { icon:areaIcon });
        GEvent.addListener(pin[e.id], 'click', function(){
            selectedCity(e.id);
            changeCity();
        });
        GEvent.addListener(pin[e.id], 'dblclick', function(){
            switchCity(e.id);
        });
        googleMap.addOverlay(pin[e.id]);
    });

    $('city').update(selection);
} // loadCities

function removeCities () {
    var obj = Object.keys(pin);

    if (typeof(obj) != 'object' || obj.length < 1) {
        return;
    }

    obj.each(function(e){
        googleMap.removeOverlay(pin[e]);
    });
    pin = {};
} // removeCities

function changeCity () {
    var id = $F('city');
    eval('var list = cities.i'+$F('state')+';');

    if (typeof(list) != 'object') { // no city found
        $('city').update('');
        return;
    }

    list.each(function(e){
        if (e.id == id) {
            var infoWin = '<h3 style="position:relative; top:-12px; padding-right:10px;"><b>'+e.name+'</b></h3>' +
                          '<div style="padding-left:5px;"><?php __('Total Ads'); ?>: '+e.count+'</div>' +
                          '<span class="hand maplink" style="position:relative; top:8px;" onclick="switchCity('+e.id+');"><?php __('Switch to this location'); ?></span>';

            googleMap.panTo(new GLatLng(e.l1, e.l2));
            pin[e.id].openInfoWindow(infoWin);
        }
    });
} // changeCity

function selectedState (id) {
    if (!id) {
        return;
    }
    for (var i=0; i<$('state').options.length; i++) {
        if (id == $('state').options[i].value) {
            $('state').options[i].selected = true;
        }
    }
} // selectedState

function selectedCity (id) {
    if (!id) {
        return;
    }
    for (var i=0; i<$('city').options.length; i++) {
        if (id == $('city').options[i].value) {
            $('city').options[i].selected = true;
        }
    }
} // selectedCity

function switchCity (id) {
    document.location = '<?php e($this->base.'/locations/city/'); ?>'+id;
} // switchCity

initialize();
</script>
